import React, {useState} from 'react'
import {DatePicker, Space} from 'antd'
import dayjs from 'dayjs'

const {RangePicker} = DatePicker

function MyDatePicker({
                          selectedDateString,
                          setSelectedDateString,
                          initialDate
                      }) {
    // 保存选择的日期时间
    const [selectedDate, setSelectedDate] = useState(
        initialDate || [dayjs(), dayjs()]
    )

    const rangePresets = [
        {
            label: '最近一周',
            value: [dayjs().add(-7, 'day'), dayjs()]
        },
        {
            label: '最近一个月',
            value: [dayjs().add(-1, 'month'), dayjs()]
        },
        {
            label: '最近三个月',
            value: [dayjs().add(-3, 'month'), dayjs()]
        }
    ]

    const onRangeChange = (dates, dateStrings) => {
        setSelectedDate(dates)
        setSelectedDateString(dateStrings)
    }

    return (
        <Space direction="vertical">
            <RangePicker
                value={selectedDate}
                showTime // 允许选择时间
                format="YYYY-MM-DD HH:mm:ss" // 设置日期和时间的格式
                presets={rangePresets}
                onChange={onRangeChange}
            />
        </Space>
    )
}

export default MyDatePicker
